<template>
	<view class="form-page">
		<view class="status-bar"></view>

		<!-- 顶部进度指示器 -->
		<view class="step-container glass-effect">
			<view class="step-indicator">
				<view class="step" :class="{ active: current >= 0 }">
					<view class="step-dot">1</view>
					<view class="step-label">基本资料</view>
				</view>
				<view class="step-line" :class="{ active: current >= 1 }"></view>
				<view class="step" :class="{ active: current >= 1 }">
					<view class="step-dot">2</view>
					<view class="step-label">详细资料</view>
				</view>
				<view class="step-line" :class="{ active: current >= 2 }"></view>
				<view class="step" :class="{ active: current >= 2 }">
					<view class="step-dot">3</view>
					<view class="step-label">个人信息</view>
				</view>
			</view>
		</view>

		<!-- 基本资料 -->
		<view v-if="current === 0" class="form-container multi-shadow">
			<view class="form-header">
				<view class="form-title gradient-text">基本资料</view>
				<view class="form-subtitle">请填写您的基本个人信息</view>
			</view>

			<view class="form-content">
				<view class="form-item">
					<text class="form-label">真实姓名</text>
					<input class="form-input input-modern focus-glow" placeholder="请输入您的真实姓名"
						v-model="basicInfo.realName" />
				</view>

				<view class="form-item">
					<text class="form-label">性别</text>
					<view class="gender-group">
						<view class="gender-item tag-modern hover-scale" :class="{ active: basicInfo.gender === '男' }"
							@click="basicInfo.gender = '男'">男</view>
						<view class="gender-item tag-modern hover-scale" :class="{ active: basicInfo.gender === '女' }"
							@click="basicInfo.gender = '女'">女</view>
					</view>
				</view>

				<!-- 出生日期部分修改 -->
				<view class="form-item">
					<text class="form-label">出生日期</text>
					<view class="date-input input-modern hover-scale" @click="showDatePicker">
						<text>{{ basicInfo.birthday || '请选择出生日期' }}</text>
						<text class="calendar-icon">📅</text>
					</view>
				</view>

				<!-- 替换日历选择器为滑动选择器 -->
				<!-- 日期选择器部分修改 -->
				<u-picker :show="showCalendar" :columns="dateColumns" @confirm="confirmDate"
					@cancel="showCalendar = false" :defaultIndex="defaultDateIndex">
				</u-picker>

				<view class="form-item">
					<text class="form-label">年龄</text>
					<input class="form-input input-modern" disabled v-model="basicInfo.age"
						placeholder="年龄将根据出生日期自动计算" />
				</view>

				<view class="form-item">
					<text class="form-label">身高(cm)</text>
					<input class="form-input input-modern focus-glow" type="number" placeholder="0"
						v-model="basicInfo.height" />
				</view>

				<view class="form-item">
					<text class="form-label">体重(kg)</text>
					<input class="form-input input-modern focus-glow" type="number" placeholder="0"
						v-model="basicInfo.weight" />
				</view>
			</view>

			<view class="form-footer">
				<button class="next-btn btn-modern gradient-bg hover-scale" @click="nextStep">下一步</button>
			</view>
		</view>

		<!-- 删除这个旧的日历选择器 -->
		<!-- <u-calendar 
      :show="showCalendar" 
      mode="single" 
      @confirm="confirmDate" 
      @close="showCalendar = false"
      :defaultDate="new Date()">
    </u-calendar> -->

		<!-- 详细资料 -->
		<view v-if="current === 1" class="form-container multi-shadow">
			<view class="form-header">
				<view class="form-title gradient-text">详细资料</view>
				<view class="form-subtitle">请填写您的详细个人信息</view>
			</view>

			<view class="form-content">
				<view class="form-item">
					<text class="form-label">婚姻状况</text>
					<view class="select-input input-modern hover-scale" @click="showMaritalPicker = true">
						<text>{{ detailInfo.maritalStatus || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">教育程度</text>
					<view class="select-input input-modern hover-scale" @click="showEducationPicker = true">
						<text>{{ detailInfo.education || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">职业</text>
					<input class="form-input input-modern focus-glow" placeholder="请输入您的职业"
						v-model="detailInfo.occupation" />
				</view>

				<view class="form-item">
					<text class="form-label">年收入(元)</text>
					<view class="select-input input-modern hover-scale" @click="showIncomePicker = true">
						<text>{{ detailInfo.income || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view>

<!-- 				<view class="form-item">
					<text class="form-label">所在省份</text>
					<view class="select-input input-modern hover-scale" @click="showProvincePicker = true">
						<text>{{ detailInfo.province || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view> -->

				<!-- 详细资料中的城市选择部分 -->
				<view class="form-item">
				    <text class="form-label">所在城市</text>
				    <view class="select-input input-modern hover-scale" @click="openCityPicker">
				        <text>{{ detailInfo.province && detailInfo.city && detailInfo.area ? 
				            `${detailInfo.province}/${detailInfo.city}/${detailInfo.area}` : '请选择' }}</text>
				        <text class="select-icon">▼</text>
				    </view>
				</view>

				<!-- 删除原来的省份选择 -->
<!-- 				<view class="form-item">
					<text class="form-label">所在城市</text>
					<view class="select-input input-modern hover-scale" @click="showCityPicker = true">
						<text>{{ detailInfo.city || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view> -->
			</view>

			<view class="form-footer btn-group">
				<button class="prev-btn btn-modern hover-scale" @click="prevStep">上一步</button>
				<button class="next-btn btn-modern gradient-bg hover-scale" @click="nextStep">下一步</button>
			</view>
		</view>

		<!-- 个人信息 -->
		<view v-if="current === 2" class="form-container multi-shadow">
			<view class="form-header">
				<view class="form-title gradient-text">个人信息</view>
				<view class="form-subtitle">请填写您的个人爱好和兴趣</view>
			</view>

			<view class="form-content">
				<view class="form-item">
					<text class="form-label">住房情况</text>
					<view class="select-input input-modern hover-scale" @click="showHousingPicker = true">
						<text>{{ personalInfo.housing || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">购车情况</text>
					<view class="select-input input-modern hover-scale" @click="showCarPicker = true">
						<text>{{ personalInfo.car || '请选择' }}</text>
						<text class="select-icon">▼</text>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">吸烟情况</text>
					<view class="tag-group">
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.smoking === '不吸烟' }" @click="personalInfo.smoking = '不吸烟'">
							不吸烟</view>
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.smoking === '偶尔吸烟' }" @click="personalInfo.smoking = '偶尔吸烟'">
							偶尔吸烟</view>
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.smoking === '经常吸烟' }" @click="personalInfo.smoking = '经常吸烟'">
							经常吸烟</view>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">饮酒情况</text>
					<view class="tag-group">
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.drinking === '不饮酒' }" @click="personalInfo.drinking = '不饮酒'">
							不饮酒</view>
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.drinking === '偶尔饮酒' }"
							@click="personalInfo.drinking = '偶尔饮酒'">偶尔饮酒</view>
						<view class="tag-item tag-modern hover-scale"
							:class="{ active: personalInfo.drinking === '经常饮酒' }"
							@click="personalInfo.drinking = '经常饮酒'">经常饮酒</view>
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">兴趣爱好</text>
					<view class="hobby-group">
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('旅游') }" @click="toggleHobby('旅游')">旅游
						</view>
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('美食') }" @click="toggleHobby('美食')">美食
						</view>
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('运动') }" @click="toggleHobby('运动')">运动
						</view>
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('阅读') }" @click="toggleHobby('阅读')">阅读
						</view>
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('电影') }" @click="toggleHobby('电影')">电影
						</view>
						<view class="hobby-item tag-modern hover-scale"
							:class="{ active: personalInfo.hobbies.includes('音乐') }" @click="toggleHobby('音乐')">音乐
						</view>
					</view>
				</view>
			</view>

			<view class="form-footer">
				<button class="prev-btn btn-modern hover-scale" style="width: 100%;" @click="prevStep">上一步</button>
				<button class="submit-btn btn-modern gradient-bg hover-scale" style="width: 100%; margin-top: 20rpx;"
					@click="submitForm">提交</button>
			</view>
		</view>

		<!-- 添加各种选择器组件 -->
		<u-picker :show="showMaritalPicker" :columns="maritalColumns" @confirm="onMaritalStatusChange"
			@cancel="showMaritalPicker = false">
		</u-picker>

		<u-picker :show="showEducationPicker" :columns="educationColumns" @confirm="onEducationChange"
			@cancel="showEducationPicker = false">
		</u-picker>

		<u-picker :show="showIncomePicker" :columns="incomeColumns || [['5万以下', '5-10万', '10-20万', '20-50万', '50万以上']]"
			@confirm="onIncomeChange" @cancel="showIncomePicker = false">
		</u-picker>

		<u-picker :show="showHousingPicker" :columns="housingColumns" @confirm="onHousingChange"
			@cancel="showHousingPicker = false">
		</u-picker>

		<u-picker :show="showCarPicker" :columns="carColumns" @confirm="onCarChange" @cancel="showCarPicker = false">
		</u-picker>

        <!-- 添加城市选择器组件 -->
<u-picker :show="showCityPicker" :columns="[provinces.map(p => p.name), citys.map(c => c.name), areas.map(a => a.name)]" 
    @confirm="onCityPickerConfirm" @cancel="showCityPicker = false" @change="onCityPickerChange">
</u-picker>

	</view>
</template>

<!-- 日期选择方法修改 -->
<script>
import {
    getDictData
} from '@/utils/dict'
export default {
    data() {
        return {
            current: 0,
            // 基本资料
            basicInfo: {
                realName: '',
                gender: '男',
                birthday: '',
                age: '',
                height: '',
                weight: ''
            },
            // 详细资料
            detailInfo: {
                maritalStatus: '',
                education: '',
                occupation: '',
                income: '',
                province: '',
                city: '',
                area: '' // 新增区县字段
            },
            // 个人信息
            personalInfo: {
                housing: '',
                car: '',
                smoking: '',
                drinking: '',
                hobbies: []
            },
            // 控制各种选择器的显示
            showCalendar: false,
            showMaritalPicker: false,
            showEducationPicker: false,
            showIncomePicker: false,
            showProvincePicker: false,
            showCityPicker: false,
            showHousingPicker: false,
            showCarPicker: false,

            // 添加日期选择器相关数据
            dateColumns: [
                [], // 年
                [], // 月
                [] // 日
            ],
            defaultDateIndex: [0, 0, 0],

            showDatePickerValue: false,
            tempDate: null,
            startDate: '1950-01-01',
            endDate: new Date().toISOString().split('T')[0],

            // 添加字典数据
            dictData: {
                gender: [], // 性别
                maritalStatus: [], // 婚姻状况
                education: [], // 教育程度
                housing: [], // 住房情况
                car: [], // 购车情况
                smoking: [], // 吸烟情况
                drinking: [], // 饮酒情况
                hobbies: [], // 兴趣爱好
                ethnicGroup: [] // 民族
            },

            // 初始化选择器列数据为空数组，而不是null
            maritalColumns: [
                []
            ],
            educationColumns: [
                []
            ],
            incomeColumns: [
                []
            ],
            housingColumns: [
                []
            ],
            carColumns: [
                []
            ],
            provinceColumns: [
                []
            ],
            cityColumns: [
                []
            ]
        }
    },
    created() {
        // 初始化日期选择器数据
        this.initDatePicker();
        // 加载字典数据
        this.loadDictData();
        // 加载城市数据
        this.getCityData();
    },
    computed: {
        // 计算属性：城市选择器数据
        addressList() {
            return [this.provinces, this.citys, this.areas];
        }
    },
    methods: {
        // 步骤控制
        nextStep() {
            if (this.current < 2) {
                this.current++
                this.animateStepChange()
            }
        },
        prevStep() {
            if (this.current > 0) {
                this.current--
                this.animateStepChange()
            }
        },

                // 获取城市数据
        getCityData() {
            try {
                // 方式一：直接导入JSON文件
                // 需要先在项目中创建一个js文件，将regions.json的内容导出
                const regionsData = require('@/static/uvui/example/regions.js');
                this.provinces = regionsData.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
                
                // 初始化市和区数据
                if (this.provinces.length > 0) {
                    this.citys = this.provinces[0].children || [];
                    if (this.citys.length > 0) {
                        this.areas = this.citys[0].children || [];
                    }
                }
                
                setTimeout(() => {
                    this.cityLoading = false;
                }, 200);
            } catch (error) {
                console.error('获取城市数据失败:', error);
                // 使用备用方法
                this.getCityDataFallback();
            }
        },

                // 打开城市选择器
        openCityPicker() {
            this.showCityPicker = true;
            // 如果已有选择，设置默认值
            if (this.$refs.cityPicker && this.detailInfo.province) {
                this.setDefaultCityValue();
            }
        },

        // 添加步骤切换动画
        animateStepChange() {
            // 这里可以添加一些动画效果
            setTimeout(() => {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                })
            }, 100)
        },

        // 修改确认日期选择方法
        confirmDate(e) {
            try {
                // console.log('日期选择事件触发:', JSON.stringify(e));

                // 解析选择的日期 - 修改为处理uView picker返回的对象格式
                if (e && e.value && Array.isArray(e.value) && e.value.length === 3) {
                    // 处理滑动选择器的返回值
                    const yearStr = e.value[0];
                    const monthStr = e.value[1];
                    const dayStr = e.value[2];

                    // 提取数字
                    const year = parseInt(yearStr.replace('年', ''));
                    const month = parseInt(monthStr.replace('月', ''));
                    const day = parseInt(dayStr.replace('日', ''));

                    if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
                        // 格式化日期显示
                        this.basicInfo.birthday = `${year}/${month}/${day}`;

                        // 计算年龄
                        const today = new Date();
                        let age = today.getFullYear() - year;
                        if (today.getMonth() < month - 1 ||
                            (today.getMonth() === month - 1 && today.getDate() < day)) {
                            age--;
                        }
                        this.basicInfo.age = age.toString();

                        console.log('设置生日:', this.basicInfo.birthday);
                        console.log('计算年龄:', this.basicInfo.age);
                    }
                }
            } catch (error) {
                console.error('日期处理错误:', error);
            }

            this.showCalendar = false;
        },

        // 城市选择器变化事件
onCityPickerChange(e) {
    const { columnIndex, value, values } = e;
    
    // 如果选择了省份，更新城市列表
    if (columnIndex === 0) {
        const provinceIndex = value[0];
        console.log(provinceIndex)
        this.citys = this.provinces[provinceIndex].children || [];
        
        // 如果有城市，更新区县列表
        if (this.citys.length > 0) {
            this.areas = this.citys[0].children || [];
        } else {
            this.areas = [];
        }
    }
    
    // 如果选择了城市，更新区县列表
    if (columnIndex === 1) {
        const cityIndex = value[1];
        if (this.citys[cityIndex]) {
            this.areas = this.citys[cityIndex].children || [];
        } else {
            this.areas = [];
        }
    }
        },

        // 城市选择器确认事件
onCityPickerConfirm(e) {
    const { value } = e;
    if (value && value.length >= 3) {
        this.detailInfo.province = value[0];
        this.detailInfo.city = value[1];
        this.detailInfo.area = value[2];
    }
    this.showCityPicker = false;
},

        // 添加兴趣爱好切换方法
        toggleHobby(hobby) {
            const index = this.personalInfo.hobbies.indexOf(hobby);
            if (index === -1) {
                this.personalInfo.hobbies.push(hobby);
            } else {
                this.personalInfo.hobbies.splice(index, 1);
            }
        },

        // 添加表单提交方法
        submitForm() {
            // 表单验证
            if (!this.basicInfo.realName) {
                uni.showToast({
                    title: '请输入真实姓名',
                    icon: 'none'
                });
                this.current = 0;
                return;
            }

            if (!this.basicInfo.birthday) {
                uni.showToast({
                    title: '请选择出生日期',
                    icon: 'none'
                });
                this.current = 0;
                return;
            }

            // 合并所有表单数据
            const formData = {
                basicInfo: this.basicInfo,
                detailInfo: this.detailInfo,
                personalInfo: this.personalInfo
            };

            // 保存表单数据到本地存储
            uni.setStorageSync('registerFormData', JSON.stringify(formData));

            // 提交成功提示
            uni.showToast({
                title: '提交成功',
                icon: 'success',
                duration: 2000,
                success: () => {
                    setTimeout(() => {
                        // 跳转到注册页面
                        uni.navigateTo({
                            url: '/pages/register/index'
                        });
                    }, 2000);
                }
            });
        },


        onMaritalStatusChange(e) {
            this.detailInfo.maritalStatus = e.value[0];
            this.showMaritalPicker = false;
        },

        onEducationChange(e) {
            this.detailInfo.education = e.value[0];
            this.showEducationPicker = false;
        },

        onIncomeChange(e) {
            this.detailInfo.income = e.value[0];
            this.showIncomePicker = false;
        },

        onProvinceChange(e) {
            this.detailInfo.province = e.value[0];
            this.showProvincePicker = false;
        },

        onCityChange(e) {
            this.detailInfo.city = e.value[0];
            this.showCityPicker = false;
        },

        onHousingChange(e) {
            this.personalInfo.housing = e.value[0];
            this.showHousingPicker = false;
        },

        onCarChange(e) {
            this.personalInfo.car = e.value[0];
            this.showCarPicker = false;
        },

        // 初始化日期选择器
        initDatePicker() {
            const currentYear = new Date().getFullYear();
            const startYear = 1950;

            // 生成年份数据
            const years = [];
            for (let i = currentYear; i >= startYear; i--) {
                years.push(i + '年');
            }

            // 生成月份数据
            const months = [];
            for (let i = 1; i <= 12; i++) {
                months.push(i + '月');
            }

            // 初始化日期数据（默认31天）
            const days = [];
            for (let i = 1; i <= 31; i++) {
                days.push(i + '日');
            }

            this.dateColumns = [years, months, days];
        },

        // 根据年月更新日期选择器的天数
        updateDays(year, month) {
            const days = [];
            let daysInMonth = 31;

            // 计算月份的天数
            if ([4, 6, 9, 11].includes(month)) {
                daysInMonth = 30;
            } else if (month === 2) {
                // 判断闰年
                const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
                daysInMonth = isLeapYear ? 29 : 28;
            }

            for (let i = 1; i <= daysInMonth; i++) {
                days.push(i + '日');
            }

            // 更新日期列
            this.dateColumns.splice(2, 1, days);
        },

        // 显示日期选择器
        showDatePicker() {
            // 如果已有生日，设置默认选中值
            if (this.basicInfo.birthday) {
                const parts = this.basicInfo.birthday.split('/');
                if (parts.length === 3) {
                    const year = parseInt(parts[0]);
                    const month = parseInt(parts[1]);
                    const day = parseInt(parts[2]);

                    // 设置默认选中的索引
                    const yearIndex = this.dateColumns[0].findIndex(item => parseInt(item.replace('年', '')) === year);
                    const monthIndex = month - 1;
                    const dayIndex = day - 1;

                    if (yearIndex !== -1) {
                        this.defaultDateIndex = [yearIndex, monthIndex, dayIndex];
                        // 更新天数
                        this.updateDays(year, month);
                    }
                }
            } else {
                // 默认选中当前日期
                const today = new Date();
                const yearIndex = this.dateColumns[0].findIndex(item =>
                    parseInt(item.replace('年', '')) === today.getFullYear()
                );
                const monthIndex = today.getMonth();
                const dayIndex = today.getDate() - 1;

                if (yearIndex !== -1) {
                    this.defaultDateIndex = [yearIndex, monthIndex, dayIndex];
                    // 更新天数
                    this.updateDays(today.getFullYear(), today.getMonth() + 1);
                }
            }

            this.showCalendar = true;
        },

        // 加载字典数据
        loadDictData() {
            // 加载性别字典
            getDictData('sys_gender').then(data => {
                this.dictData.gender = data;
            });

            // 加载婚姻状况字典
            getDictData('sys_marital_status').then(data => {
                this.dictData.maritalStatus = data;
                // 更新选择器数据
                this.updateMaritalPicker();
            });

            // 加载教育程度字典
            getDictData('sys_education').then(data => {
                this.dictData.education = data;
                // 更新选择器数据
                this.updateEducationPicker();
            });

            // 加载住房情况字典
            getDictData('sys_house_status').then(data => {
                this.dictData.housing = data;
                // 更新选择器数据
                this.updateHousingPicker();
            });

            // 加载购车情况字典
            getDictData('sys_car_status').then(data => {
                this.dictData.car = data;
                // 更新选择器数据
                this.updateCarPicker();
            });

            // 加载吸烟情况字典
            getDictData('sys_smoking_status').then(data => {
                this.dictData.smoking = data;
            });

            // 加载饮酒情况字典
            getDictData('sys_drinking_status').then(data => {
                this.dictData.drinking = data;
            });

            // 加载兴趣爱好字典
            getDictData('sys_hobbies').then(data => {
                this.dictData.hobbies = data;
                // 更新兴趣爱好选项
                this.updateHobbies();
            });

            // 加载民族字典
            getDictData('sys_ethnic_group').then(data => {
                this.dictData.ethnicGroup = data;
            });
        },

        // 更新婚姻状况选择器
        updateMaritalPicker() {
            // 从字典数据中提取标签
            const labels = this.dictData.maritalStatus.map(item => item.dictLabel);
            // 更新选择器列
            this.maritalColumns = [labels];
        },

        // 更新教育程度选择器
        updateEducationPicker() {
            // 从字典数据中提取标签
            const labels = this.dictData.education.map(item => item.dictLabel);
            // 更新选择器列
            this.educationColumns = [labels];
        },

        // 更新住房情况选择器
        updateHousingPicker() {
            // 从字典数据中提取标签
            const labels = this.dictData.housing.map(item => item.dictLabel);
            // 更新选择器列
            this.housingColumns = [labels];
        },

        // 更新购车情况选择器
        updateCarPicker() {
            // 从字典数据中提取标签
            const labels = this.dictData.car.map(item => item.dictLabel);
            // 更新选择器列
            this.carColumns = [labels];
        },

        // 更新兴趣爱好选项
        updateHobbies() {
            // 这里可以根据字典数据动态生成兴趣爱好选项
            // 如果需要在模板中使用
        },

        // ... 其他方法保持不变 ...
    }
}
</script>

<style lang="scss">
	@import url('/static/css/modern-ui.css');

	.form-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
		padding-bottom: 40rpx;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.step-container {
		padding: 30rpx 40rpx;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.form-container {
		margin: 30rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.form-header {
		margin-bottom: 40rpx;
	}

	.form-title {
		font-size: 44rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.form-subtitle {
		font-size: 28rpx;
		color: #909399;
		padding-bottom: 20rpx;
		border-bottom: 2px solid #ff6b6b;
		width: 60%;
	}

	.form-content {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
	}

	.date-input,
	.select-input {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		/* 添加内边距 */
	}

	.calendar-icon,
	.select-icon {
		color: #909399;
		margin-left: 10rpx;
		/* 添加左边距 */
	}

	/* 修改性别选择组样式，使其不那么突兀 */
	.gender-group {
		display: flex;
		justify-content: flex-start;
	}

	/* 进一步缩小性别选择框 */
	.gender-item {
		width: 100rpx;
		/* 从120rpx减小到100rpx */
		height: 70rpx;
		/* 从80rpx减小到70rpx */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-size: 26rpx;
		/* 从28rpx减小到26rpx */

		&:last-child {
			margin-right: 0;
		}
	}

	.tag-group {
		display: flex;
		justify-content: space-between;
	}

	.tag-item {
		flex: 1;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;

		&:last-child {
			margin-right: 0;
		}
	}

	.hobby-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.hobby-item {
		width: 48%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.form-footer {
		margin-top: 60rpx;
	}

	.next-btn,
	.submit-btn {
		width: 100%;
		height: 90rpx;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
	}

	.prev-btn {
		width: 48%;
		height: 90rpx;
		background-color: #fff;
		color: #ff6b6b;
		border: 1px solid #ff6b6b;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn,
	.next-btn {
		width: 48%;
	}

	/* 涟漪效果 */
	.ripple {
		position: absolute;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.7);
		transform: scale(0);
		animation: ripple 0.6s linear;
		pointer-events: none;
	}

	@keyframes ripple {
		to {
			transform: scale(4);
			opacity: 0;
		}
	}
</style>